<template>
	<div id="paramIndex">
		<el-row>
			<!-- 表格查询条件 -->
			<el-col :span="24">
				<el-form :inline="true" ref="paramForm" :model="queryForm">
					<el-form-item><el-input v-model="queryForm.paramCode" placeholder="字典编号/名称"></el-input></el-form-item>
					<el-form-item>
						<el-select v-model="queryForm.paramType" placeholder="字典类型">
							<el-option label="系统字典" :value="1"></el-option>
							<el-option label="业务字典" :value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="getParamDatas">查询</el-button>
						<el-button @click="resetQueryForm" icon="el-icon-refresh-right">重置</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row>
			<!-- 数据表格 -->
			<el-col :span="13">
				<el-row>
					<el-col :span="24">
						<el-button
							type="primary"
							icon="el-icon-plus"
							@click="
								dialog.paramData = true;
								dialog.paramDataIsEdit = false;
							"
						>
							新增字典
						</el-button>
						<el-popconfirm title="这是一段内容确定删除吗？" @confirm="moreDeleteParamDatas">
							<el-button slot="reference" type="danger" icon="el-icon-delete">批量删除</el-button>
						</el-popconfirm>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-table @row-click="paramDataTableClick" :data="paramData" border style="width: 100%" @selection-change="paramDataSelected">
							<el-table-column type="selection" width="55"></el-table-column>
							<el-table-column prop="paramCode" label="编号" width="180"></el-table-column>
							<el-table-column prop="paramName" label="名称" width="180"></el-table-column>
							<el-table-column prop="paramType" label="字典类型">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.paramType==1">系统字典</el-tag>
									<el-tag type="success" v-if="scope.row.paramType==2">业务字典</el-tag>
								</template>
							</el-table-column>
							<el-table-column prop="paramDesc" label="描述"></el-table-column>
							<el-table-column fixed="right" label="操作" align="center" width="100">
								<template slot-scope="scope">
									<el-button @click="paraDataDEditRow(scope.row)" type="primary" size="small" icon="el-icon-edit" circle title="编辑"></el-button>
									<el-button @click="paraDataDeleteRow(scope.row)" type="danger" icon="el-icon-delete" size="small" circle title="删除"></el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination
							@size-change="paramDataSizeChange"
							@current-change="paramDataCurrentChange"
							:current-page="paramDataPage.page"
							:page-sizes="[10, 20, 40, 100]"
							:page-size="paramDataPage.limit"
							layout="total, sizes, prev, pager, next, jumper"
							:total="paramDataPage.total"
						></el-pagination>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="1">
				<el-divider direction="vertical"></el-divider>
				<!-- <div class="lineDiv"></div> -->
			</el-col>
			<el-col :span="10">
				<el-row>
					<el-col :span="24">
						<el-button type="primary" icon="el-icon-plus" @click="addParamInfo">新增字典值</el-button>
						<el-popconfirm title="这是一段内容确定删除吗？" @confirm="moreDeleteParamInfoDatas">
							<el-button slot="reference" type="danger" icon="el-icon-delete">批量删除</el-button>
						</el-popconfirm>
						<span>{{ nowSelectedParamName == null ? '[请点击左侧字典数据]' : '[当前字典：' + nowSelectedParamName + ']' }}</span>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-table :data="paramInfoData" border style="width: 100%" @selection-change="paramInfoDataSelected">
							<el-table-column type="selection" width="55"></el-table-column>
							<el-table-column prop="dataName" label="名称"></el-table-column>
							<el-table-column prop="dataValue" label="值"></el-table-column>
							<el-table-column prop="dataDesc" label="描述"></el-table-column>
							<el-table-column prop="isUse" label="是否启用">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.isUse==0">已启用</el-tag>
									<el-tag type="danger" v-if="scope.row.isUse==1">未启用</el-tag>
								</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" align="center" width="100">
								<template slot-scope="scope">
									<el-button @click="paramInfoDataDEditRow(scope.row)" type="primary" size="small" icon="el-icon-edit" circle title="编辑"></el-button>
									<el-button @click="paramInfoDataDeleteRow(scope.row)" type="danger" icon="el-icon-delete" size="small" circle title="删除"></el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination
							@size-change="paramInfoDataSizeChange"
							@current-change="paramInfoDataCurrentChange"
							:current-page="paramInfoDataPage.page"
							:page-sizes="[10, 20, 40, 100]"
							:page-size="paramInfoDataPage.limit"
							layout="total, sizes, prev, pager, next, jumper"
							:total="paramInfoDataPage.total"
						></el-pagination>
					</el-col>
				</el-row>
			</el-col>
		</el-row>

		<!-- 添加或修改字典数据弹窗 -->
		<el-dialog
			:title="dialog.paramDataIsEdit == true ? '编辑字典' : '新增字典'"
			:visible.sync="dialog.paramData"
			width="30%"
			:show-close="false"
			:destroy-on-close="true"
			:close-on-click-modal="false"
		>
			<el-form ref="addOrEditParamDataForm" :rules="addOrEditParamDataFormRules" :model="addOrEditParamData" label-width="80px">
				<el-form-item label="编号" prop="paramCode"><el-input v-model="addOrEditParamData.paramCode" placeholder="请输入字典编号" maxlength="20" show-word-limit></el-input></el-form-item>
				<el-form-item label="名称" prop="paramName"><el-input v-model="addOrEditParamData.paramName" placeholder="请输入字典名称" maxlength="20" show-word-limit></el-input></el-form-item>
				<el-form-item label="字典类型" prop="paramType">
					<el-select v-model="addOrEditParamData.paramType" placeholder="请选择字典类型">
						<el-option label="系统字典" :value="1"></el-option>
						<el-option label="业务字典" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="描述">
					<el-input show-word-limit maxlength="80" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入字典描述" v-model="addOrEditParamData.paramDesc"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitParamDataSaveOrEdit" :loading="formLoading">{{ dialog.paramDataIsEdit == false ? '保存' : '确认修改' }}</el-button>
					<el-button
						@click="
							dialog.paramData = false;
							addOrEditParamData = {};
						"
					>
						取消
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!-- 添加或修改字典属性数据弹窗 -->
		<el-dialog
			:title="dialog.paramInfoDataIsEdit == true ? '编辑属性' : '新增属性'"
			:visible.sync="dialog.paramInfoData"
			width="30%"
			:show-close="false"
			:destroy-on-close="true"
			:close-on-click-modal="false"
		>
			<el-form ref="addOrEditParamInfoDataForm" :rules="addOrEditParamInfoDataFormRules" :model="addOrEditParamInfoData" label-width="80px">
				<el-form-item label="属性-名" prop="dataName">
					<el-input show-word-limit v-model="addOrEditParamInfoData.dataName" placeholder="请输入属性名" maxlength="20"></el-input>
				</el-form-item>
				<el-form-item label="属性-值" prop="dataValue">
					<el-input show-word-limit v-model="addOrEditParamInfoData.dataValue" placeholder="请输入属性值" maxlength="20"></el-input>
				</el-form-item>
				<el-form-item label="排序号" prop="dataOrder">
					<el-input-number show-word-limit v-model="addOrEditParamInfoData.dataOrder" :min="1" :max="100" label="请选择排序号"></el-input-number>
				</el-form-item>
				<el-form-item label="描述">
					<el-input
					show-word-limit
						maxlength="80"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="请输入属性描述"
						v-model="addOrEditParamInfoData.dataDesc"
					></el-input>
				</el-form-item>
				<el-form-item label="是否启用">
					<el-select v-model="addOrEditParamInfoData.isUse" placeholder="请选择是否启用">
						<el-option label="启用" :value="0"></el-option>
						<el-option label="不启用" :value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitParamInfoDataSaveOrEdit" :loading="formLoading">
						{{ dialog.paramInfoDataIsEdit == false ? '保存' : '确认修改' }}
					</el-button>
					<el-button
						@click="
							dialog.paramInfoData = false;
							addOrEditParamInfoData = {};
						"
					>
						取消
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import * as paramAPI from '@/api/param.js';
export default {
	name: 'paramIndex',
	data() {
		return {
			//弹窗层
			dialog: {
				paramDataIsEdit: false,
				paramData: false,
				paramInfoDataIsEdit: false,
				paramInfoData: false
			},
			//查询表单数据
			queryForm: {
				paramCode: null,
				paramType: 1
			},
			//字典主表-表格数据
			paramData: [],
			//字典从表-明细数据
			paramInfoData: [],
			//当前选中的主字典id
			nowSelectedParamID: null,
			//当前选中的主字典名称
			nowSelectedParamName: null,
			//主表-分页数据
			paramDataPage: {
				page: 1,
				limit: 10,
				total: 0
			},
			//从表-分页数据
			paramInfoDataPage: {
				page: 1,
				limit: 10,
				total: 0
			},
			//主表-多选选中数据
			paramDataSelect: [],
			//附表-多选选中数据
			paramInfoDataSelect: [],
			//主表-添加或编辑表单
			addOrEditParamData: {
				paramID: null,
				paramCode: null,
				paramName: null,
				paramType: 1,
				paramDesc: null
			},
			//主表-添加或编辑表单校验
			addOrEditParamDataFormRules: {
				paramCode: { required: true, message: '请输入字典编号', trigger: 'blur' },
				paramName: { required: true, message: '请输入字典名称', trigger: 'blur' },
				paramType: { required: true, message: '请选择字典类型', trigger: 'change' }
			},
			//表单提交loading对象
			formLoading: false,
			//附表-添加或编辑表单
			addOrEditParamInfoData: {
				paramInfoID: null,
				dataName: null,
				dataValue: null,
				dataDesc: null,
				dataOrder: 1,
				isUse: 0,
				paramID: null
			},
			//附表-添加或编辑表单校验
			addOrEditParamInfoDataFormRules: {
				dataName: { required: true, message: '请输入属性名称', trigger: 'blur' },
				dataValue: { required: true, message: '请输入属性值', trigger: 'blur' },
				dataOrder: { required: true, message: '请填写顺序序号', trigger: 'blur' }
			}
		};
	},
	mounted() {
		this.getParamDatas();
	},
	methods: {
		//查询主表信息
		getParamDatas() {
			let _this = this;
			this.nowSelectedParamID = null;
			this.nowSelectedParamName = null;
                
                paramAPI.pages(_this.queryForm,_this.paramDataPage)
				.then(function(response) {
					console.log(response);
					if (response.code == '0000') {
						_this.paramData = response.data.pageData;
						_this.paramDataPage.total = response.data.total;
						_this.getParamInfoData();
					} 
				});
		},
		//主表-批量删除
		moreDeleteParamDatas() {
			if (this.paramDataSelect.length <= 0) {
				this.$notify.warning({
					title: '删除提示',
					message: '请至少选择一条数据再删除'
				});
				return;
			}

			let ids = '';

			for (var i in this.paramDataSelect) {
				ids += this.paramDataSelect[i].paramID + ',';
			}

			ids = ids.substring(0, ids.length - 1);

			this.deleteParamDataByIDs(ids);
		},
		//主表-删除
		deleteParamDataByIDs(ids) {
			let _this = this;
            paramAPI.deletes(ids)
				.then(res => {
					if (res.code == '0000') {
						_this.getParamDatas();
					} 
				});
		},
		//附表-删除
		deleteParamInfoDataByIDs(ids) {
			let _this = this;
            paramAPI.deletes(ids)
				.then(res => {
					if (res.code == '0000') {
						_this.getParamInfoData();
					}
				});
		},
		//附表-批量删除
		moreDeleteParamInfoDatas() {
			if (this.paramInfoDataSelect.length <= 0) {
				this.$notify.warning({
					title: '删除提示',
					message: '请至少选择一条数据再删除'
				});
				return;
			}

			let ids = '';

			for (var i in this.paramInfoDataSelect) {
				ids += this.paramInfoDataSelect[i].paramInfoID + ',';
			}

			ids = ids.substring(0, ids.length - 1);

			this.deleteParamInfoDataByIDs(ids);
		},
		//保存或修改字典数据
		submitParamDataSaveOrEdit() {
			this.$refs.addOrEditParamDataForm.validate(valid => {
				if (valid) {
					this.formLoading = true;
					let _this = this;

                    if(_this.dialog.paramDataIsEdit==true){// 编辑
                        paramAPI.updateParam(_this.addOrEditParamData)
                        .then(function(res) {
						if (res.code == '0000') {
							_this.dialog.paramData = false;
							_this.addOrEditParamData = {};
							_this.formLoading = false;
							_this.getParamDatas();
						} else {
							_this.formLoading = false;
						}
                    });
                    }else{// 添加
                        paramAPI.addParam(_this.addOrEditParamData)
                            .then(function(res) {
                            if (res.code == '0000') {
                                _this.dialog.paramData = false;
                                _this.addOrEditParamData = {};
                                _this.formLoading = false;
                                _this.getParamDatas();
                            } else {
                                _this.formLoading = false;
                            }
                        });
                    }
				} else {
					return false;
				}
			});
		},
		//附表-修改或编辑数据
		submitParamInfoDataSaveOrEdit() {
			this.$refs.addOrEditParamInfoDataForm.validate(valid => {
				if (valid) {
					this.formLoading = true;
					let _this = this;

                    if(_this.dialog.paramInfoDataIsEdit == true){ // 修改字典数据
                        paramAPI.updateParamInfo(_this.addOrEditParamInfoData)
                        .then(function(res) {
                            if (res.code == '0000') {
                                _this.dialog.paramInfoData = false;
                                _this.addOrEditParamInfoData = {};
                                _this.formLoading = false;
                                _this.getParamInfoData();
                            } else {
                                _this.formLoading = false;
                            }
					    });
                    }else{// 添加字典数据
                        paramAPI.addParamInfo(_this.addOrEditParamInfoData)
                        .then(function(res) {
                            if (res.code == '0000') {
                                _this.dialog.paramInfoData = false;
                                _this.addOrEditParamInfoData = {};
                                _this.formLoading = false;
                                _this.getParamInfoData();
                            } else {
                                _this.formLoading = false;
                            }
					    });
                    }
				} else {
					return false;
				}
			});
		},
		//附表-点击新增
		addParamInfo() {
			if (this.nowSelectedParamID == null) {
				this.$notify.warning({
					title: '操作提示',
					message: '请点击左侧字典数据再进行添加'
				});
				return;
			}
			this.addOrEditParamInfoData.paramID = this.nowSelectedParamID;
			this.dialog.paramInfoData = true;
			this.dialog.paramInfoDataIsEdit = false;
		},
		//重置查询条件表单
		resetQueryForm() {
			this.queryForm = {
				paramCode: null,
				paramType: 1
			};

			this.getParamDatas();
		},
		//主表-分页条目数切换
		paramDataSizeChange(size) {
			this.paramDataPage.limit = size;
			this.getParamDatas();
		},
		//主表-页码切换
		paramDataCurrentChange(page) {
			this.paramDataPage.page = page;
			this.getParamDatas();
		},
		//附表-分页条目数切换
		paramInfoDataSizeChange(size) {
			this.paramInfoDataPage.limit = size;
			this.getParamInfoData();
		},
		//附表-页码切换
		paramInfoDataCurrentChange(page) {
			this.paramInfoDataPage.page = page;
			this.getParamInfoData();
		},
		//附表-选中回调
		paramInfoDataSelected(data) {
			this.paramInfoDataSelect = data;
		},
		//主表-选中回调
		paramDataSelected(data) {
			this.paramDataSelect = data;
		},
		//主表-行修改
		paraDataDEditRow(data) {
			this.dialog.paramDataIsEdit = true;
			this.addOrEditParamData = JSON.parse(JSON.stringify(data));
			this.dialog.paramData = true;
		},
		//主表-行删除
		paraDataDeleteRow(data) {
			this.$confirm('确定要删除这行数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.deleteParamDataByIDs(data.paramID);
			});
		},
		//附表-修改
		paramInfoDataDEditRow(data) {
			this.dialog.paramInfoDataIsEdit = true;
			this.addOrEditParamInfoData = JSON.parse(JSON.stringify(data));
			this.dialog.paramInfoData = true;
		},
		//附表-删除
		paramInfoDataDeleteRow(data) {
			this.$confirm('确定要删除这行数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.deleteParamInfoDataByIDs(data.paramInfoID);
			});
		},
		//主表点击行事件-查询附表数据
		paramDataTableClick(row, column, event) {
			this.nowSelectedParamID = row.paramID;
			this.nowSelectedParamName = row.paramName;
			this.getParamInfoData();
		},
		//附表-查询数据
		getParamInfoData() {
			let _this = this;
            paramAPI.infoPages({paramID: _this.nowSelectedParamID},_this.paramInfoDataPage)
				.then(function(response) {
					console.log(response);
					if (response.code == '0000') {
						_this.paramInfoData = response.data.pageData;
						_this.paramInfoDataPage.total = response.data.total;
					}
				});
		}
	}
};
</script>

<style scoped>
.lineDiv {
	border: 1px solid gray;
	width: 0px;
	height: 100px;
}
</style>
